<template>
	<view class="act-search-tag" :class="{
		'active': active
	}">
		{{ text }}
	</view>
</template>

<script setup>
	const props = defineProps({
		text: {
			type: String,
			default: ''
		},
		active: {
			type: Boolean,
			default: false
		}
	})
	
</script>

<style lang="scss" scoped>
	.act-search-tag {
		padding: 8px 16px;
		background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
		color: #64748b;
		border: 1px solid rgba(226, 232, 240, 0.8);
		font-weight: 600;
		border-radius: 24px;
		font-size: 12px;
		white-space: nowrap;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
	}
	
	.active{
		    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
		    color: white;
		    border-color: transparent;
		    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
		    transform: translateY(-1px);
	}
	
</style>